import React from 'react'
import {Outlet, useNavigate} from "react-router-dom"
export default function Home() {

  /* 
    使用NavLink或者Link进行跳转,被称作为声明式路由导航
    使用navigate方法进行路由跳转,被称作为编程式路由导航
  */


  /*
    useNavigate 是个hooks函数,调用后返回一个函数,是navigate方法,调用返回的这个函数,可以进行路由跳转
  */

  const navigate=useNavigate()

  // 跳转路径需要从一级路由开始写
  const toNewsHandle=()=>{
    navigate("/main/home/news?a=睡觉吗&&b=起来吧")
  }

  const toMusicHandle=()=>{
    navigate("/main/home/music?a=睡觉吗&&b=起来吧")
  }

  return (
    <div >
    <h3>我是Home的内容</h3>
    <button onClick={toNewsHandle}>News</button>
    <button onClick={toMusicHandle}>Music</button>
   <Outlet/>
  </div>
  )
}
